<template>
    <div class="page_container">
        <navBar :config="navBarConfig" />
        <div class="page_content">
            <div class="aothur_info">
                <el-row>
                    <el-col :span="2">
                        <span class="aothur-title">用户头像</span>

                    </el-col>
                    <el-col :span="10" class="headPortrait">
                        <img :src="aothurInfo.userPhoto || 'https://genescloud.oss-cn-shanghai.aliyuncs.com/web/images/avatar/default_avatar/default.png'"
                            class="userPhoto">

                        <!-- 暂时没有文件服务器 -->
                        <div class="changeProto">
                            <el-button size="small">更换头像</el-button>
                            <input type="file" class="file_update" @change="getBase64">
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <span class="aothur-title">用户昵称</span>

                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">
                            <span>{{ aothurInfo.userName }}</span>
                            <span style="color: #1d6af2;">
                                <i class="vip_info"></i>
                                {{ aothurInfo.level ? 'LV' + aothurInfo.level : 'LV' + 0 }}
                            </span>
                        </span>

                    </el-col>
                    <el-col :span="2">
                        <span class="aothur-title">手机号码</span>
                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">
                            {{ aothurInfo.mobilePhone ? aothurInfo.mobilePhone : '暂未绑定' }}
                        </span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <span class="aothur-title">注册邮箱</span>

                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">{{ aothurInfo.email ? aothurInfo.email : '暂未绑定' }}</span>
                    </el-col>
                    <el-col :span="2">
                        <span class="aothur-title">职称</span>
                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">{{ aothurInfo.title ? aothurInfo.title : '暂未填写职位' }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <span class="aothur-title">单位</span>

                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">{{ aothurInfo.company ? aothurInfo.company : '暂未填写单位' }}</span>
                    </el-col>
                    <el-col :span="2">
                        <span class="aothur-title">个人简介</span>
                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">{{ aothurInfo.personIntroduction ? aothurInfo.personIntroduction :
                            '暂未填写个人简介'
                        }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <span class="aothur-title">联系地址</span>
                    </el-col>
                    <el-col :span="10">
                        <!-- last_item -->
                        <span class="aothur-item ">{{ aothurInfo.contactAddress ? aothurInfo.contactAddress :
                            '暂未填写地址'
                        }}</span>
                    </el-col>
                    <el-col :span="2">
                        <span class="aothur-title">空间占比</span>
                    </el-col>
                    <el-col :span="10">
                        <span class="aothur-item">{{ $size2Str(aothurInfo.hasUsedSize) + ' / ' + $size2Str(aothurInfo.maxSpace)
                        }}</span>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="22">
                        <el-button size="small" style="margin-left: 9%; border-radius:5px"
                            @click="$router.push('/modifyInformation')">编辑信息</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { updataUserProtoRequest, getUserInfoRequest } from '@/api/user'
export default {
    name: 'BaiaoweifanUiUserIndex',

    data() {
        return {
            imageUrl: '',
            navBarConfig: {
                leftTool: true,
                rightTool: false,
            },
            aothurInfo: {
                userPhoto: '',
                userName: '',
                mobilePhone: '',
                level: '1',
                email: '',
                title: '',
                company: '',
                personIntroduction: '',
                contactAddress: '',
                hasUsedSize:0,
                maxSpace:0
            }
        };
    },
    created() {
        // this.aothurInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.init()
    },
    methods: {
        async init() {
            const res = await getUserInfoRequest()
            if (res.code !== 200) return this.$message.error(res.message)
            this.aothurInfo = res.data
            this.$store.commit('login/SET_USERINFO', res.data)
        },
        getBase64(e) {
            // 选择的文件
            let file = e.target.files[0];
            if (!file) return
            // const isJPG = file.type === 'image/jpeg';
            // if (!isJPG) {
            //   this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isLt2M) return this.$message.error('上传头像图片大小不能超过 1MB!');
            // // console.log(file.name) // 文件名称，有需求可处理
            // // console.log(file.type) // 文件类型，有需求可处理
            // 判断文件是否读取完毕，读取完毕后执行
            if (window.FileReader) {
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = async (e) => {
                    let base64String = e.target.result;
                    // 此处可对该base64进行获取赋值传入后端
                    // console.log("bese64编码：", base64String);
                    try {
                        const res = await updataUserProtoRequest({ userPhoto: base64String })
                        // // console.log(res,'111');
                        if (res.code !== 200) return this.$message.error(res.message);
                        const userInfo = await getUserInfoRequest()
                        // console.log(userInfo.data);
                        this.$store.commit('login/SET_USERINFO', userInfo.data)
                        this.aothurInfo = JSON.parse(localStorage.getItem('userInfo'))
                        this.$message({
                            message: '头像修改成功！',
                            type: 'success'
                        });
                    } catch (error) {
                        this.$message.error('系统错误，请联系管理员！')
                    }
                }
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.box-card {
    width: 300px;
}

.aothur_info {
    padding-left: 25px;

    .aothur-title {
        height: 40px;
        line-height: 40px;
        margin-bottom: 20px;
        color: #555;
        font-size: 15px;
    }

    .aothur-item {
        display: flex;
        width: 80%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        background-color: #e5e5e5;
        border-radius: 5px;
        margin-bottom: 20px;
        font-size: 15px;

        &.last_item {
            width: 91%;
        }

        .vip_info {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(../../../assets/VIP.png) no-repeat;
            background-size: 20px;
            transform: translateY(5px);
            margin: 0 0 0 10px;
        }
    }

    .headPortrait {
        .userPhoto {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }

        display: flex;
        align-items: center;
        margin-bottom: 25px;

        .changeProto {
            position: relative;
            margin-left: 20px;

            .file_update {
                position: absolute;
                left: 0;
                top: 0;
                width: 80px;
                height: 32px;
                opacity: 0;
                cursor: pointer;
            }
        }
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.avatar {
    // background-color: red;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: block;
}
</style>